<template>
    <a-card id="carddemo" :style="{ width: '647px' }" bordered>
<!--        <template #actions>-->
<!--            <span class="icon-hover"> <IconThumbUp/> </span>-->
<!--            <span class="icon-hover"> <IconShareInternal/> </span>-->
<!--            <span class="icon-hover"> <IconMore/> </span>-->
<!--        </template>-->
<!--        <template #cover>-->
<!--            <div :style="{ height: '204px',overflow: 'hidden',}">-->
<!--            </div>-->
<!--        </template>-->
        {{tbCommentVO.content}}
        <a-card-meta>
            <template #avatar>
                <div :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }">
                    <a-avatar :size="24" :style="{ marginRight: '8px' }" :image-url="tbCommentVO.user?.userAvatar ?? myAvatar">
                    </a-avatar>
                    <a-typography-text style="font-size: 9px">{{tbCommentVO.user.userName}}</a-typography-text>
                </div>
            </template>
        </a-card-meta>
    </a-card>
</template>

<script setup lang="ts">
    import { defineProps, withDefaults } from "vue";
    import {myAvatar} from '@/constant/photo'

    //获取父组件传来的参数
    interface Props{
        tbCommentVO:API.TbCommentVO;
    }
    const props = withDefaults(defineProps<Props>(),{
        tbCommentVO:() =>{
            return{};
        }
    })
</script>

<style scoped>
#carddemo{
    margin-bottom: 24px;

}
</style>